<template>
  <div style="width: 420px; height: 200px;">  
     <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="选择拥有方式">
            <el-radio-group v-model="form.state">
              <el-radio-button label="空闲" value=0 />
              <el-radio-button label="租赁" value=1 />
              <el-radio-button label="购买" value=2 />
            </el-radio-group>
            <div style= "margin-left: 20px;">
              <el-button plain type="primary" @click="submit">
                <div v-if="form.state == 0">确定解绑</div>
                <div v-else>确定更改</div>
              </el-button>
            </div>
        </el-form-item>
        <div v-if="form.state != 0">
          <el-form-item label-width="100px" label="绑定用户" prop="user">
            <el-select
               v-if="props.id"
              v-model="form.user"
              filterable
              placeholder="请输入或选择用户"
              style="width: 240px">
              <el-option
                v-for="item in users"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <div v-if="form.state == 1">
              <el-form-item  label="绑定使用时长" prop="time">
              <el-date-picker
                v-model="form.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :size="size"/>
          </el-form-item>
          </div>
        </div>
     </el-form>  
  </div>    
</template>

<script setup>  
import { get,post } from '@/plugins/axios';
import {ref,reactive} from "vue"
import path from './path';
const props = defineProps(['id','key'])
const emits = defineEmits(['update:show','getTableData'])
const users = ref([])
const form = ref({
  user: null,
  state: 0,
  time: null,
})
getUsers()
function getUsers(){
  get(path.users,null,content => {
    users.value = content
  })
}
const rules = {  
  user: [  
    { required: true, message: '请选择用户', trigger: 'change' },  
  ],  
  time: [  
    { required: true , message: '请选择时间范围', trigger: 'change', type: 'array' },  
  ],  
}; 
const formRef = ref(null);
function submit(){
  if(form.value.state == 0){
    post(path.reset,{ id:props.id, state: form.value.state},content => {
        emits("getTableData")
        emits("update:show",false)
      })
  } else if(form.value.state == 2){
    if(form.value.user != null){
      post(path.update,{ 
            id:props.id,
            state: form.value.state,
            uid: form.value.user,
            begin: new Date().getTime(),
            end: new Date().getTime() + 2207520000000},content => {
            emits("getTableData")
            emits('update:show',false)
          })
    } else {
       ElMessage({
          message: '请选择用户',
          type: 'warning',
        })
    }
  } else {
     formRef.value.validate((valid) => {  
    if (valid) {  
      alert('提交成功!');  
        post(path.update,{ 
            id:props.id,
            state: form.value.state,
            uid: form.value.user,
            begin: form.value.time[0].getTime(),
            end:form.value.time[1].getTime() },content => {
            emits("getTableData")
            emits('update:show',false)
          })
    } else {  
      console.log('提交异常！');  
      return false;  
    }  
  });  
  }  
}
</script>  

<style lang="scss" scoped>

</style>